<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ZhuaBa - News</title>

  <!-- begin::global styles -->
  <link rel="stylesheet" href="../static/assets/vendors/bundle.css" type="text/css">
  <!-- end::global styles -->

  <!-- begin::datepicker -->
  <link rel="stylesheet" href="../static/assets/vendors/datepicker/daterangepicker.css">
  <!-- begin::datepicker -->

  <!-- begin::vmap -->
  <link rel="stylesheet" href="../static/assets/vendors/vmap/jqvmap.min.css">
  <!-- begin::vmap -->
  <link rel="stylesheet" href="../static/assets/css/footer.css" type="text/css">
  <!--<link rel="stylesheet" href="../static/assets/css/header.css" type="text/css">-->
  <link rel="stylesheet" href="../static/assets/css/rankPage.min.css" type="text/css">
  <!-- begin::custom styles -->
  <link rel="stylesheet" href="../static/assets/css/app.css" type="text/css">
  <link rel="stylesheet" href="../static/assets/css/custom.css" type="text/css">
  <!-- end::custom styles -->
  <link rel="stylesheet" href="../static/assets/css/iconfont.css" type="text/css">
  <link rel="stylesheet" type="text/css" media="screen" href="../static/assets/css/player.css" />

  <script type="text/javascript">
    var days=new  Array ("日", "一", "二", "三", "四", "五", "六");
    function showDT() {
      var currentDT = new Date();
      var y,m,date,day,hs,ms,ss,theDateStr;
      y = currentDT.getFullYear(); //四位整数表示的年份
      m = currentDT.getMonth() + 1; //月
      date = currentDT.getDate(); //日
      day = currentDT.getDay(); //星期
      hs = currentDT.getHours(); //时
      ms = currentDT.getMinutes(); //分
      ss = currentDT.getSeconds(); //秒
      theDateStr = y+"年"+  m +"月"+date+"日 星期"+days[day]+" "+hs+":"+ms+":"+ss;
      document.getElementById("theClock"). innerHTML =theDateStr;
      // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
      window.setTimeout( showDT, 1000);
    }
  </script>
  <style type ="text/css">
    thead {
      display: table-header-group;
      vertical-align: middle;
      border-color: inherit;
    }
    data table {
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
    }
    tbody {
      display: table-row-group;
      vertical-align: middle;
      border-color: inherit;
    }
  </style>
</head>
<body onload="showDT()">

<!-- begin::page loader-->
<div class="page-loader">
  <div class="spinner-border"></div>
  <span>Loading ...</span>
</div>
<!-- end::page loader -->

<!-- begin::side menu -->
<div class="side-menu">
  <div class='side-menu-body'>
    <ul>
      <!-- 导航栏-->
      <li class="side-menu-divider">欢迎使用</li>
      <li class>
        <a href="/welcome.html"><i class="icon ti-home"></i> <span>历史上的今日</span> </a>
      </li>
      <li >
        <a href="/Music.html"><i class="icon ti-paint-bucket"></i> <span>今日热门歌曲</span> </a>
      </li>
      <li class="open"><a href="/News.html"><i class="icon ti-rocket"></i> <span>今日热点新闻</span> </a>
      </li>
      <li><a href="/Video.html"><i class="icon ti-crown"></i> <span>今日热门视频</span> </a></li>
      <li><a href="/History.html"><i class="icon ti-files"></i> <span>历史记录</span> </a>
      </li>
    </ul>
  </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
  <div class="container-fluid">

    <div class="header-logo">
      <a href="#">
        <img src="../static/assets/media/image/light-logo.png" alt="...">
        <span class="logo-text d-none d-lg-block">Zhuaba</span>
      </a>
    </div>

    <div class="header-body">
      <ul></ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
            <i class="fa fa-search"></i>
          </a>
        </li>

        <li class="nav-item dropdown">
          <a href="#" data-toggle="dropdown">
            <figure class="avatar avatar-sm avatar-state-success">
              <img class="rounded-circle" src="../static/assets/media/image/avatar.jpg" alt="...">
            </figure>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown-divider"></div>
            <a href="/" class="text-danger dropdown-item">登出</a>
            <a href="Person.html" class="text-danger dropdown-item">个人信息</a>
          </div>
        </li>
        <li class="nav-item d-lg-none d-sm-block">
          <a href="#" class="nav-link side-menu-open">
            <i class="ti-menu"></i>
          </a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

  <div class="container-fluid">
    <!-- begin::page header -->
    <div class="page-header d-md-flex justify-content-between align-items-center">
      <div>
        <h4>今日热点</h4>
        <h4 id="theClock"></h4>
      </div>
    </div>
    <!-- end::page header -->
  </div>
  <div id="myarea" th:text="${htmlCode1}" style="text-align: center;margin:0 500px">
  </div>
  <script>
      var str = document.getElementById('myarea').innerText
      document.getElementById('myarea').innerHTML = str
      function history(data) {
        $.ajax({
          type:"post",
          url:"http://localhost:8080/"+"/News/saveJsonHistory",
          dataType:'json',
          data:{
            "href": data.href,
            "time": new Date(),
            "locationhref":location.href,
          },//json
          success(data){

          }
        });
      }
  </script>
  <div style="text-align:center; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
    <p style="color: #0b0b0b">来源：<a href="https://s.weibo.com/top/summary?cate=realtimehot" target="_blank">新浪微博</a></p>
  </div>

</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="../static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::charts -->
<script src="../static/assets/vendors/charts/chartjs/chart.min.js"></script>
<script src="../static/assets/vendors/charts/peity/jquery.peity.min.js"></script>
<script src="../static/assets/js/examples/charts/chartjs.js"></script>
<script src="../static/assets/js/examples/charts/peity.js"></script>
<!-- end::charts -->

<!-- begin::daterangepicker -->
<script src="../static/assets/vendors/datepicker/daterangepicker.js"></script>
<!-- end::daterangepicker -->

<!-- begin::dashboard -->
<script src="../static/assets/js/examples/dashboard.js"></script>
<!-- end::dashboard -->

<!-- begin::vamp -->
<script src="../static/assets/vendors/vmap/jquery.vmap.min.js"></script>
<script src="../static/assets/vendors/vmap/maps/jquery.vmap.usa.js"></script>
<script src="../static/assets/js/examples/vmap.js"></script>
<!-- end::vamp -->

<!-- begin::custom scripts -->
<script src="../static/assets/js/custom.js"></script>
<script src="../static/assets/js/app.js"></script>
<!-- end::custom scripts -->
<script type="text/javascript">

  </script>
<style type ="text/css">
  thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }
  data table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }
  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }
</style>
</body>
</html>